<template>
  <div id="walletIndex">
    <div style="top: -42%; left: 35%; position: absolute">
      <h1 style="text-align: center">第一次使用CCMask</h1>
    </div>

    <el-space direction="horizontal">
      <el-card class="box-card" style="width: 450px; height: 300px">
        <div>
          <h2>不，我已经有了一个账户助记词</h2>
        </div>
        <div style="margin-top: 110px; left: 15%; position: absolute">
          <el-button type="primary" @click="importWalletVisible = true">导入钱包</el-button>
        </div>
      </el-card>

      <el-card class="box-card" style="width: 450px; height: 300px">
        <div>
          <h2>第一次使用，立即开始设置</h2>
        </div>
        <div style="margin-top: 110px; left: 60%; position: absolute">
          <el-button type="primary" @click="dialogFormVisible = true">创建钱包</el-button>
        </div>
      </el-card>
    </el-space>

    <el-dialog v-model="dialogFormVisible" title="创建钱包" width="500">
      <el-form :model="form">
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确定密码" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.checkPassword" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="doCreate"> 创建</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="importWalletVisible" title="导入钱包" width="500">
      <el-form :model="importForm">
        <el-form-item label="私钥" :label-width="formLabelWidth">
          <el-input type="password" v-model="importForm.privatekey" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="importWalletVisible = false">取消</el-button>
          <el-button type="primary" @click="doImport"> 导入</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <el-dialog v-model="dialogVisible2" title="私钥" width="500">
    <span>{{ prikey.value }}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">记住</el-button>
        <el-button type="primary" @click="dialogVisible2 = false"> 返回</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import Web3 from 'web3'
import ethwallet from "ethereumjs-wallet";
const dialogFormVisible = ref(false)
const importWalletVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  password: '',
  checkPassword: ''
})
const importForm = reactive({
  privatekey: ''
  // mnemonic: ''
})
const dialogVisible2 = ref(false)
const router = useRouter()
const web3 = new Web3(
  Web3.givenProvider || 'https://sepolia.infura.io/v3/88b2bd48430847fab3c22b93a7c07d69'
)
const prikey = ref()
//Web3.givenProvider || 'https://sepolia.infura.io/v3/88b2bd48430847fab3c22b93a7c07d69'
const wallet = reactive(JSON.parse(localStorage.getItem('wallet')) || {})
const visiable = ref(localStorage.getItem('hasLogin') != null)
/**
 * 创建账户
 */
const createWallet = async () => {
  const pass = form.password

  const account = await web3.eth.accounts.create(
    '2435@#@#@±±±±!!!!678543213456764321§34567543213456785432134567'
  )

  prikey.value = account.privateKey
  console.log(prikey.value)

  const t = await account.encrypt(pass)

  const walletObj = {
    address: account.address,
    keystore: t
  }
  alert(prikey.value)

  localStorage.setItem('wallet', JSON.stringify(walletObj))

  await router.replace(
   '/user/mask/info'
)
}
const doCreate = async () => {
  dialogFormVisible.value = false

  if (form.password !== form.checkPassword) {
    console.log('密码和确认密码不相同')
  } else {
    await createWallet()
  }
}

/**
 * 通过私钥导入账户
 * @returns {Promise<void>}
 */
const importWallet = async () => {
  console.log(importForm.privatekey)
  try {
    // let wallet = await ethwallet.fromPrivateKey(importForm.privatekey)
    const t =  web3.eth.accounts.privateKeyToAccount(importForm.privatekey)

    localStorage.setItem('hasLogin', 'true')
    // const t = await account.encrypt(pass)

    const walletObj = {
      address: t.address,
      keystore: t
    }

    localStorage.setItem('hasLogin', 'true')
    localStorage.setItem('wallet', JSON.stringify(walletObj))

    await router.replace(
      '/user/mask/info'
    )
  } catch (error) {
    alert('私钥错误')
    return false
  }
}

const doImport = async () => {
  importWalletVisible.value = false
  await importWallet()
}
onMounted(() => {
  console.log('index',wallet.keystore)
  console.log('index',visiable.value)
  // if (visiable.value === false ) {
  //   console.log('----?>|||',wallet)
  //   router.push({ path:'/user/mask/login' })
  // } else if (visiable.value === true) {
  //   router.push({path: '/user/mask/info' })
  // }
  // if (visiable.value === true && wallet.keystore) {
  //   router.push({
  //     path: '/user/mask/info'
  //   })
  // }
  // else if (wallet.keystore !== undefined && visiable.value === false) {
  //   router.push({
  //     path: '/user/mask/login'
  //   })
  // }
})
// watchEffect(() => {
//   if (visiable.value === true && wallet.keystore) {
//     router.replace({
//       path: '/user/mask/info'
//     })
//   }
//   else if (wallet.keystore !== undefined && visiable.value === false) {
//     router.replace({
//       path: '/user/mask/login'
//     })
//   }
// })
</script>

<style scoped>
#walletIndex {
  position: absolute;
  width: 1000px;
  top: 40%;
  left: 35%;
  /* 自身高度一半的负值 */
  margin-top: -50px;
  /* 自身宽度一半的负值 */
  margin-left: -50px;
}
</style>
